<template>
  <div class="page-filter">
    <div class="page-filter-left">
      <a-button type="primary" @click="addAtlas">添加文章</a-button>
      <a-button @click="batchStatus(1)">启用</a-button>
      <a-button @click="batchStatus(2)">禁用</a-button>
      <a-button danger @click="deleteAtlas">删除</a-button>
    </div>
    <div class="page-filter-right">
      <a-select
        v-model:value="articleListState.status"
        placeholder="全部状态"
        class="m-r-24"
        :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
      >
        <a-select-option :value="undefined">全部状态</a-select-option>
        <a-select-option :value="1">启用</a-select-option>
        <a-select-option :value="2">禁用</a-select-option>
      </a-select>
      <a-cascader
        :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
        v-model:value="classList"
        change-on-select
        class="m-r-24"
        :allowClear="false"
        :field-names="{ label: 'name', value: 'id', children: 'subcateg' }"
        :options="atlasClassList"
        placeholder="全部分类"
        @change="handleSelectChange"
      >
        <template #suffixIcon>
          <a-tooltip placement="top" color="#fff">
            <template #title> 双击选中父级 </template>
            <div class="ellipsis-text">
              <question-circle-outlined />
            </div>
          </a-tooltip>
        </template>
      </a-cascader>
      <a-select
        v-model:value="articleListState.price_type"
        placeholder="收费状态"
        class="m-r-24"
        :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
      >
        <a-select-option :value="undefined">收费状态</a-select-option>
        <a-select-option :value="1">免费</a-select-option>
        <a-select-option :value="2">付费</a-select-option>
        <a-select-option :value="3">点播</a-select-option>
      </a-select>
      <a-select
        v-model:value="articleListState.publish_state"
        placeholder="连载筛选"
        class="m-r-24"
        :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
      >
        <a-select-option :value="undefined">连载筛选</a-select-option>
        <a-select-option :value="1">已完结</a-select-option>
        <a-select-option :value="2">连载中</a-select-option>
      </a-select>
      <a-input
        v-model:value.trim="articleListState.article_id"
        :maxlength="19"
        :onkeyup="
          () => {
            if (articleListState.article_id)
              articleListState.article_id = articleListState.article_id.replace(/\D/g, '')
          }
        "
        :onafterpaste="
          () => {
            if (articleListState.article_id)
              articleListState.article_id = articleListState.article_id.replace(/\D/g, '')
          }
        "
        class="m-r-24 w-[196px]"
        placeholder="请输入文章ID"
      />
      <a-input
        v-model:value.trim="articleListState.article_keyword"
        class="input-m-r-16 w-[196px]"
        placeholder="请输入文章名称关键词"
      />
      <a-button type="primary" class="m-r-8" @click="handleSearch">搜索</a-button>
      <a-button class="btn-m-r-24" @click="handleReset">重置</a-button>
    </div>
  </div>
  <!-- 删除对话框 -->
  <modal-view
    title="提示"
    v-model:visible="deleteVisible"
    okText="确定"
    cancelText="取消"
    :width="458"
    @confirm="deleteConfirm"
    @cancel="deleteCancel"
  >
    <span>确定要删除该文章吗</span>
  </modal-view>
</template>
<script lang="ts" setup>
import { articleListState, statusState, resetState } from '../state'
import ModalView from '@/components/components/modal/ModalView.vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import apis from '@/apis'
import { onMounted, ref } from 'vue'
import { storage } from '@/utils/storage'

const {
  site: { edit_status, del_article, article_classify_list }
} = apis

const deleteVisible = ref(false)
const classList = ref<string[]>([]) //分类数据
const siteId = storage.get('siteId')
const emit = defineEmits(['update-list'])
const router = useRouter()

const atlasClassList = ref()
const addAtlas = () => {
  router.push({ name: 'EditArticle' })
}
//获取分类接口
const getAtlasList = () => {
  article_classify_list({ site_id: siteId, categ_status: 1 }).then((res: any) => {
    if (res?.categ.length === 0) return []
    res?.categ.unshift({ id: undefined, name: '全部分类' })
    atlasClassList.value = res?.categ.map((item: any) => {
      for (var key in item) {
        if (Array.isArray(item[key]) && item[key].length === 0) {
          delete item[key]
        }
      }
      return item
    })
  })
}
//删除分类
const deleteAtlas = () => {
  if (!statusState.selectedRowKeys.length) return message.warning('请选择至少一篇文章进行删除')
  console.log(statusState.selectedRowKeys)
  deleteVisible.value = true
}
//搜索
const handleSearch = () => {
  emit('update-list')
}
//重置
const handleReset = () => {
  resetState()
  classList.value = []
  emit('update-list')
}
//图集分类change事件
const handleSelectChange = (value: any, selectedOptions: any) => {
  console.log('value[0]: ', value[0])
  console.log('value: ', value, selectedOptions)
  articleListState.categ_id = value.length > 0 && value[0] ? value[0] : undefined
  articleListState.subcateg_id = value.length > 0 && value[1] ? value[1] : undefined
  console.log(articleListState)
}
//状态批量修改
const batchStatus = (checked: number) => {
  if (!statusState.selectedRowKeys.length) return message.warning('请选择至少一篇文章进行编辑')
  const data = {
    type: 4,
    status: checked === 1 ? 1 : 2,
    id: statusState.selectedRowKeys
  }
  edit_status(data).then(() => {
    message.success(checked === 1 ? '启用成功' : '禁用成功')
    statusState.selectedRowKeys = []
    emit('update-list')
  })
}
/**
  删除文章对话框事件
 */
const deleteConfirm = (value: any) => {
  del_article({ article_id: statusState.selectedRowKeys }).then(() => {
    message.success('批量删除成功')
    deleteVisible.value = value
    emit('update-list')
  })
}
const deleteCancel = () => {
  deleteVisible.value = false
  statusState.selectedRowKeys = []
}
onMounted(() => {
  getAtlasList()
  statusState.selectedRowKeys = []
  resetState()
})
</script>

<style lang="less" scoped>
@common-color: #0083ff;

.page-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;

  &-left {
    display: flex;
    flex-wrap: nowrap;
    margin-top: 10px;

    .ant-btn:not(:last-child) {
      margin-right: 16px;
    }

    .ant-btn:last-child {
      background-color: rgba(254, 76, 77, 0.08);
      margin-right: 16px;
    }
  }

  &-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    .m-r-24 {
      width: 134px;
      height: 32px;
      margin: 10px 24px 0 0;
    }

    .input-m-r-16 {
      width: 134px;
      height: 32px;
      margin: 10px 16px 0 0;
    }

    .btn-m-r-24 {
      margin: 10px 24px 0 0;
    }

    .m-r-8 {
      margin: 10px 8px 0 0;
    }

    .blue-icon {
      color: @common-color;
      margin-top: 10px;
    }
  }
}
</style>
